import * as React from "react";

export default function LayoutEffect() {
  const [count, setCount] = React.useState(0);

  // 多次点击造成页面闪烁
  /* React.useEffect(() => {
    if (count === 0) {
      setCount(10 + Math.random() * 200);
    }
  }, [count]); */

  // 阻塞页面绘制，count值最终改变后才会绘制页面，不会出现闪烁现象
  React.useLayoutEffect(() => {
    if (count === 0) {
      setCount(10 + Math.random() * 200);
    }
  }, [count]);

  return (
    <>
      <div>Count:{count}</div>
      <button onClick={() => setCount(0)}></button>
    </>
  );
}
